<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="7">
        <dd-card title="分类商品数量(饼图)">
          <pie-echart :pieData="goodsCount"></pie-echart>
        </dd-card>
      </el-col>
      <el-col :span="10">
        <dd-card title="不同城市商品销量">
          <map-echart :mapData="addressGoodsSale"></map-echart>
        </dd-card>
      </el-col>
      <el-col :span="7">
        <dd-card title="分类商品数量(玫瑰图)">
          <rose-echart :roseData="goodsCount"></rose-echart>
        </dd-card>
      </el-col>
    </el-row>

    <el-row class="mt-10px" :gutter="10">
      <el-col :span="12">
        <dd-card title="分类商品销量">
          <line-echart v-bind="goodsSale"></line-echart>
        </dd-card>
      </el-col>
      <el-col :span="12">
        <dd-card title="分类商品收藏">
          <bar-echart v-bind="goodsFavor"></bar-echart>
        </dd-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import DdCard from '@/base-ui/card'
import { useStore } from '@/store'
import { computed } from 'vue'
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart
} from '@/components/page-echarts'
import MapEchart from '@/components/page-echarts/src/map-echart.vue'

const store = useStore()
store.dispatch('dashboard/getDashboardDataAction')
const goodsCount = computed(() =>
  store.state.dashboard.categoryGoodsCount.map((item) => ({
    name: item.name,
    value: item.goodsCount
  }))
)

const addressGoodsSale = computed(() =>
  store.state.dashboard.addressGoodsSale.map((item) => ({
    name: item.address,
    value: item.count
  }))
)
console.log(addressGoodsSale.value)

const goodsSale = computed(() => {
  const xLabels: string[] = []
  const values: any[] = []
  const saleItems = store.state.dashboard.categoryGoodsSale
  for (const item of saleItems) {
    xLabels.push(item.name)
    values.push(item.goodsSale)
  }
  return { xLabels, values }
})

const goodsFavor = computed(() => {
  const xLabels: string[] = []
  const values: any[] = []
  const favorItems = store.state.dashboard.categoryGoodsFavor
  for (const item of favorItems) {
    xLabels.push(item.name)
    values.push(item.goodsFavor)
  }
  return { xLabels, values }
})
</script>

<style scoped></style>
